<!doctype html>
<html>
	<head>
		<title>Progressbar test</title>
		<link rel="stylesheet" href="gfx/progressbar.css" type="text/css" />
		<script src="../../os3jslib/liwe.js"></script>
		<script src="../../os3jslib/dom.js"></script>
		<script src="../../os3jslib/object_enh.js"></script>
		<script src="../wwl.js"></script>
		<script src="progressbar.js"></script>
		<script>
		var hbar, vbar;
		function init ()
		{
			hbar = new WWL.progressbar ( 'hbar', $ ( 'container-h' ), WWL.progressbar.HORIZONTAL );
			vbar = new WWL.progressbar ( 'vbar', $ ( 'container-v' ), WWL.progressbar.VERTICAL );
		}
		function change ( v )
		{
			hbar.add ( v );
			vbar.add ( v );
		}
		function timer ()
		{
			hbar.add ( 1 );
			vbar.add ( 1 );
			if ( hbar.value < hbar.max_value || vbar.value < vbar.max_value )
				setTimeout ( timer, 50 );
		}
		</script>
		<style type="text/css">
		#container-h
		{
			width: 200px;
			height: 24px;
		}
		#container-v
		{
			width: 24px;
			height: 200px;
		}
		</style>
	</head>

	<body onload="init()">
		<div id="container-h"></div>
		<div id="container-v"></div>
		<button onclick="change(10)">+10</button>
		<button onclick="change(-10)">-10</button>
		<button onclick="timer()">Timer</button>
	</body>
</html>
